<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ESModule</title>
  <!-- 
 在 JavaScript 的 ES6（ECMAScript 2015）中，模块化的导出模式主要有两种：命名导出（Named Exports）和默认导出（Default Export）。
  一、命名导出（Named Exports）
   1. 定义
  命名导出允许在一个模块中导出多个变量、函数或类，其他模块可以通过相同的名称导入这些导出的内容。

   2. 语法
  - 导出时使用  `export`  关键字：
  // module.js
  export const name = '小明';
  export function greet() {
      console.log('Hello, ' + name);
  }
   3. 导入命名导出

  - 导入时使用  `{}`  包裹导出的名称：
  // main.js
  import { name, greet } from './module.js';

  console.log(name); // 输出: 小明
  greet(); // 输出: Hello, 小明
   4. 注意事项

  - 可以在一个模块中有多个命名导出。
  - 导入时可以选择性地导入需要的内容。
  - 如果导出的名称在导入时发生冲突，可以使用  `as`  关键字重命名：
  import { name as userName } from './module.js';
  二、默认导出（Default Export）

   1. 定义
  每个模块可以有一个默认导出，通常用于导出单一的值或对象。默认导出使得导入时可以使用任意名称。

   2. 语法

  - 导出时使用  `export default`  关键字：
  // module.js
  const person = {
      name: '小明',
      age: 25
  };

  export default person;
   3. 导入默认导出

  - 导入时不需要使用  `{}` ，可以自定义名称：
  // main.js
  import person from './module.js';

  console.log(person.name); // 输出: 小明
   4. 注意事项

  - 每个模块只能有一个默认导出。
  - 导入时可以自定义名称，便于使用。

  三、同时使用命名导出和默认导出
  一个模块可以同时使用命名导出和默认导出：
  // module.js
  export const name = '小明';
  export function greet() {
      console.log('Hello, ' + name);
  }

  const person = {
      name: '小明',
      age: 25
  };

  export default person;
  在导入时，可以同时导入命名导出和默认导出：
  // main.js
  import person, { name, greet } from './module.js';

  console.log(name); // 输出: 小明
  greet(); // 输出: Hello, 小明
  console.log(person.age); // 输出: 25
  四、总结
  - 命名导出：允许导出多个变量、函数或类，导入时需要使用相同的名称。
  - 默认导出：每个模块只能有一个默认导出，导入时可以使用任意名称。
  - 同时使用：一个模块可以同时使用命名导出和默认导出，增强了灵活性。
  -->
</head>
<body>
  
  <!-- 注意事项二: 在我们打开对应的html时, 如果html中有使用模块化的代码, 那么必须开启一个服务来打开 type="module" -->
  <script src="./foo.js" type="module"></script>
  <script src="./main.js" type="module"></script>

</body>
</html>